<template>
	<scroll-view class="page-container" scroll-y="true" refresher-enabled="true">
		<view class="head">
			<view class="user-card position-ralative">
				<view class="user-info flex-row">
					<view class="avatar-box">
						<image src="https://wixs.henanmu.com/statics/system_images/default_avatar.jpeg"></image>
					</view>
					<view class="info">
						<view class="name">
							<text class="line1 nickName">(ID：741661) 136****8369</text>
						</view>
						<view class="user-tag">
							<text class="">随手拍用户</text>
						</view>
					</view>
					<view class="setting">
						<image
							src="">
						</image>
					</view>
				</view>
				<view class="integral flex-list">
					<view class="integral-box">
						<text class="integral-name">我的积分</text>
						<text class="integral-number">5000</text>
					</view>
					<view class="integral-detail">
						<navigator>
							<text class="detail-name">
								积分明细
							</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="millde">
			<navigator>
				<view class="middle-item promotion">
					<text class="tips first">申请成为推广员</text>
					<image src="/static/images/promotion.png"></image>
				</view>
			</navigator>
			<navigator>
				<view class="middle-item promotion">
					<text class="tips">推广员权益</text>
					<image src="/static/images/equity.png"></image>
				</view>
			</navigator>
		</view>
		<view class="serve-conter">
			<view class="menu-title">
				服务中心
			</view>
			<view class="list-box flex-wrap">
				<view class="item text-aline-center">
					<image src="/static/images/reporting.png"></image>
					<text>我的上报</text>
				</view>
				<view class="item text-aline-center">
					<image src="/static/images/order.png"></image>
					<text>商城订单</text>
				</view>
				<view class="item text-aline-center">
					<image src="/static/images/generalization.png"></image>
					<text>推广中心</text>
				</view>
				<view class="item text-aline-center">
					<image src="/static/images/customer.png"></image>
					<text>联系客服</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
</script>

<style scoped lang="scss">
	.page-container {
		height: 100%;
	}

	.user-card {
		position: relative;
		width: 100%;
		height: 160px;
		margin: 0 auto;
		padding-top: 27px;
		padding-left: 18px;
		background-image: url(/static/images/user_image.png);
		background-size: 100% auto;

		.user-info {
			.avatar-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				height: 60px;
				border-radius: 50%;

				image {
					position: relative;
					width: 54px;
					height: 54px;
					border-radius: 50%;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 10px;
				padding: 10px 0;

				.name {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 16px;
					color: #fff;
					line-height: 19px;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.user-tag {
					display: flex;
					align-items: center;
					font-size: 11px;
					color: #103e7b;
					background-image: url();
					background-size: cover;
					width: 63px;
					height: 16px;
					text-align: center;
					justify-content: center;
				}
			}


			.setting {
				align-self: flex-start;
				position: relative;
				margin-right: 18px;
				padding-top: 10px;

				image {
					width: 26px;
					height: 26px;
				}
			}
		}

		.integral {
			padding-top: 76rpx;
			padding-left: 27px;
			padding-right: 24px;

			.integral-name {
				font-weight: 400;
				font-size: 12px;
				color: #333;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.integral-number {
				padding-left: 6px;
				font-weight: 400;
				font-size: 16px;
				color: #333;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.integral-detail {
				width: 65px;
				height: 20px;
				background: #fff;
				border-radius: 4px 4px 4px 4px;
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				line-height: 20px;

				.detail-name {
					font-family: Source Han Sans;
					font-weight: 400;
					font-size: 12px;
					color: #999;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.millde {
		margin-top: 15px;
		margin-left: 10px;
		margin-right: 10px;
		flex: 1;
		justify-content: space-between;
		position: relative;
		display: flex;

		.promotion {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 344rpx;
			height: 80px;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, .04);
			border-radius: 9px 9px 9px 9px;

			.tips {
				font-weight: 400;
				font-size: 16px;
				color: #000;
				margin-left: 17px;
				margin-right: 13px;

				&.first {
					width: 64px;
					font-weight: 400;
					font-size: 16px;
					color: #000;
					margin-left: 17px;
					margin-right: 30px;
				}
			}

			image {
				width: 46px;
				height: 44px;
			}
		}
	}

	.serve-conter {
		margin: 12px 10px 0 10px;
		// height: 122px;
		background: #fff;
		border-radius: 9px 9px 9px 9px;

		.menu-title {
			font-weight: 700;
			font-size: 16px;
			color: #000;
			padding: 18px 18px 17px;

		}

		.list-box {
			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				width: 25%;
				font-weight: 400;
				margin-bottom: 20px;
				font-size: 13px;
				color: #000;

				image {
					width: 36px;
					height: 36px;
					margin-bottom: 6px;
				}
			}
		}

	}
</style>
